<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            display: flex;
            align-items: flex-end;
            justify-content: center;

        }

        div {
            width: 100px;
            background-color: rgb(180, 84, 49);
            margin: 10px;
            text-align: center;
            transition: all .7s ease-in-out;
            color: aliceblue;
            border-radius: 20px;
        }
    </style>
</head>

<body>

    <script>
        const arr = [1,2,3,4,10,2,1,2,2,2].map( _ => (Math.random() * 20).toFixed(0) )

        console.log(arr)

        initView(arr)

        function move(dom, target) {
            dom.style.transform = `translateX(${target}px)`
        }

        function seelp(dr) {
            return new Promise(res => {
                setTimeout(_ => res(), dr)
            })
        }

        function initView(dataArr) {
            document.body.innerHTML = ''
            dataArr.forEach(ele => {
                const temp = document.createElement('div')
                temp.className = 'div'
                temp.style.height = `${ele * 20}px`
                temp.innerText = ele;
                document.body.appendChild(temp)
            })
        }

        (async function (params) {

            const divs = Array.from(document.querySelectorAll('div'))

            for (let index = 0; index < divs.length; index++) {

                const divs = Array.from(document.querySelectorAll('div'))

                const dataArr = divs.map(ele => parseInt(ele.innerText))


                let temp = divs[0];
                let seep = 1

                for (let j = 0 + 1; j < divs.length - index ; j++) {
                    const num1 = +temp.innerText
                    const num2 = +divs[j].innerText
                    temp.style.backgroundColor = 'blue';

                    await seelp(1000)


                    if (num1 > num2) {
                        move(temp, 120 * seep)
                        move(divs[j], -120);

                        [dataArr[j - 1], dataArr[j]] = [dataArr[j], dataArr[j - 1]]

                        seep++
                    } else {
                        temp.style.backgroundColor = ''
                        seep = 1
                        temp = divs[j]
                    }
                }
                await seelp(1000)
                initView(dataArr)

            }


        })()
    </script>
</body>

</html>